<template>
	<view class="ss-flex-col ss-col-center ss-row-center empty-box" :style="[{ paddingTop: paddingTop + 'rpx' }]">
		<view class="">
			<image class="empty-icon" :src="icon" mode="widthFix" :style="[{width:width+ 'rpx'}]"></image>
		</view>
		<view class="empty-text ss-m-t-28 ss-m-b-40">
			<text v-if="text !== ''">{{ text }}</text>
		</view>
		<button class="ss-reset-button empty-btn" v-if="showAction" @tap="clickAction">
			{{ actionText }}
		</button>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	/**
	 * 容器组件 - 装修组件的样式容器
	 */

	const props = defineProps({
		// 图标
		icon: {
			type: String,
			default: '',
		},
		width: {
			type: String,
			default: '400',
		},
		// 描述
		text: {
			type: String,
			default: '',
		},
		// 是否显示button
		showAction: {
			type: Boolean,
			default: false,
		},
		// button 文字
		actionText: {
			type: String,
			default: '',
		},
		// 链接
		actionUrl: {
			type: String,
			default: '',
		},
		// 间距
		paddingTop: {
			type: String,
			default: '50',
		},
	});

	const emits = defineEmits(['clickAction']);

	function clickAction() {
		if (props.actionUrl !== '') {
			sheep.$router.go(props.actionUrl);
		}
		emits('clickAction');
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		width: 100%;
	}

	.empty-icon {
		width: 240rpx;
	}

	.empty-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #000;
	}

	.empty-btn {
		width: 320rpx;
		height: 70rpx;
		border: 2rpx solid var(--ui-BG-Main);
		border-radius: 35rpx;
		font-weight: 500;
		color: var(--ui-BG-Main);
		font-size: 28rpx;
	}
</style>